<!doctype html>
<html lang="zh">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>预制菜溯源系统</title>
      <link rel="stylesheet" href="../static/css/style.css">

       <style>
           body {
               font-family: 宋体;
           }
           .charts-container {
                   display: grid;
                   grid-template-columns: repeat(2, 1fr);
                   gap: 20px;
                   margin-bottom: 20px;
               }
     
               .chart-card {
                   background: white;
                   border-radius: 12px;
                   padding: 20px;
                   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
               }
     
               .chart-title {
                   font-size: 1.2em;
                   color: #2d3748;
                   margin-bottom: 15px;
                   padding-bottom: 10px;
                   border-bottom: 2px solid #e2e8f0;
               }
     
               .chart {
                   height: 300px;
                   width: 100%;
               }
       </style>
   </head>
   <body>
<div id="loading"><div id="loading-center"></div></div>
      <div class="wrapper">
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="{{url_for('index')}}">
               <img src="../static/images/logo.png" class="img-fluid" alt="">
               <span>预制菜溯源系统</span>
               </a>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">

                     <li class="active">
                        <a href="{{url_for('index')}}" class="iq-waves-effect"><i class="ri-home-4-fill"></i><span>首页</span></a>
                     </li>
                     <li>
                        <a href="{{url_for('trace_select')}}" class="iq-waves-effect"><i class="ri-search-2-line"></i><span>溯源查询</span></a>
                     </li>
                      <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-shield-user-fill"></i><span>个人中心 </span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('change_form')}}">资料编辑</a></li>
                              <li><a href="{{url_for('change_passwd')}}">修改密码</a></li>
                        </ul>
                     </li>

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-settings-fill"></i>用户管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('my_user')}}">我的用户</a></li>
                              <li><a href="{{url_for('add_user')}}">添加用户</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'transporter') %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-todo-fill"></i>运输管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('transport_test')}}">运输信息管理</a></li>
                              <li><a href="{{url_for('transport_show')}}">运输路线管理</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="{{url_for('product_manage')}}" class="iq-waves-effect"><i class="ri-file-edit-fill"></i><span>合约管理</span></a>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'producer') %}
                     <li>
                        <a href="javascript:void(0);"><i class="ri-stack-fill"></i>产品信息录入</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('raw_material')}}">原材料录入</a></li>
                              <li><a href="{{url_for('production_record')}}">生产记录创建</a></li>
                              <li><a href="{{url_for('product_generation')}}">产品生成</a></li>
                        </ul>
                     </li>
                     {% endif %}
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
         <div class="iq-top-navbar">
            <div class="iq-navbar-custom">

               <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="iq-search-bar">
                     <form action="#" class="searchbox">
                        <input type="text" class="text search-input" placeholder="请输入搜索内容...">
                        <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                     </form>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="ri-menu-3-line"></i>
                  </button>
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto navbar-list">

                        <li>
                           <a href="{{url_for('AI')}}">AI对话</a>
                        </li>

                        <li class="nav-item">
                           <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">所有通知<small class="badge  badge-light float-right pt-1">4</small></h5>
                                    </div>

                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/01.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">艾玛·沃森·比尼。</h6>
                                             <small class="float-right font-size-12">刚刚</small>
                                             <p class="mb-0">消息</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/02.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">新客户加入</h6>
                                             <small class="float-right font-size-12">5天前</small>
                                             <p class="mb-0">系统管理员</p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <ul class="navbar-list">
                     <li>
                        <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                           <img src="..//static/images/user1.jpg" class="img-fluid rounded mr-3" alt="user">
                           <div class="caption">
                              {% if user %}
                                  <h6 class="mb-0 line-height">{{ user.username }}</h6>
                                  <span class="font-size-12">{{ user.role }}</span>
                              {% else %}
                                  <h6 class="mb-0 line-height">未登录</h6>
                                  <span class="font-size-12">游客</span>
                              {% endif %}
                           </div>
                        </a>
                        <div class="iq-sub-dropdown iq-user-dropdown">
                           <div class="iq-card shadow-none m-0">
                              <div class="iq-card-body p-0 ">
                                 <div class="bg-primary p-3">
                                    <h5 class="mb-0 text-white line-height">你好-{{ user.username }}</h5>
                                 </div>
                                 <a href="{{url_for('change_form')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-file-user-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">个人中心</h6>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="{{url_for('change_passwd')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-profile-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">修改密码</h6>
                                       </div>
                                    </div>
                                 </a>


                                 <div class="d-inline-block w-100 text-center p-3">
                                    <a class="bg-primary iq-sign-btn" href="{{ url_for('logout') }}" role="button">退出登录<i class="ri-login-box-line ml-2"></i></a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </nav>

            </div>
         </div>
         <!-- TOP Nav Bar END -->
            <div class="container-fluid">
               <div class="row">
                  <div class="col-md-12">
							<div class="iq-card">
								<div class="iq-card-body">
									<div class="yshead">
										<ul class="row">
										  <li class=" col-md-8">
											<div class="pull-left"><img src="../static/images/user1.jpg"></div>
											<div class="pull-left">
											  <h2>欢迎，{{ user.username }}</h2>
											  <p>欢迎使用预制菜溯源系统 <span>|</span>联系电话：0551-123456<span>|</span>食心科技公司</p>
											</div>
										  </li>
										  <li class=" col-md-4">
											<div class="ysnm">
											  <div class="pull-right">
												<p>合约通过情况</p>
												<span>{{ contract_stats.approved if contract_stats else 0 }}</span> / 
												<i>{{ contract_stats.total if contract_stats else 0 }}</i>
											  </div>
											  <div class="pull-right">
												<p>合约数</p>
												<span>{{ contract_stats.total if contract_stats else 0 }}</span>
											  </div>
											</div>
										  </li>
										</ul>
									  </div>
								</div>
							</div>
						</div>
                  <!-- More content here -->
                        <div class="col-md-12">
                             <div class="iq-card">
                                <div class="iq-card-header d-flex justify-content-between">
                                   <div class="iq-header-title">
                                      <h4 class="card-title">数据可视大屏</h4>
                                   </div>
                                </div>
                             <div class="iq-card-body">
                                 <div class="charts-container">
                                        <div class="chart-card">
                                            <div class="chart-title">产品类型分布</div>
                                            <div id="productChart" class="chart"></div>
                                        </div>

                                        <div class="chart-card">
                                            <div class="chart-title">运输温度监控</div>
                                            <div id="temperatureChart" class="chart"></div>
                                        </div>

                                        <div class="chart-card">
                                            <div class="chart-title">原材料来源分析</div>
                                            <div id="materialChart" class="chart"></div>
                                        </div>

                                        <div class="chart-card">
                                            <div class="chart-title">运输距离统计</div>
                                            <div id="distanceChart" class="chart"></div>
                                        </div>

                                        <div class="chart-card">
                                            <div class="chart-title">产品验证记录统计</div>
                                            <div id="verificationChart" class="chart"></div>
                                        </div>

                                        <div class="chart-card">
                                            <div class="chart-title">合约状态分布</div>
                                            <div id="contractChart" class="chart"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
               </div>
            </div>
            <!-- Footer -->
      <footer class="bg-white iq-footer">
         <div class="container-fluid">
            <div class="row">
               <div class="col-lg-6">
                  <ul class="list-inline mb-0">
                     <li class="list-inline-item"><a href="#">使用帮助</a></li>
                     <li class="list-inline-item"><a href="#">进入官网</a></li>
                  </ul>
               </div>
               <div class="col-lg-6 text-right">
                  Copyright 2024 <a href="">预制菜溯源系统</a> 版权所有
               </div>
            </div>
         </div>
      </footer>
      <!-- Footer END -->
         </div>
      </div>
      <!-- Wrapper END -->

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="../static/js/jquery.min.js"></script>
      <script src="../static/js/bootstrap.min.js"></script>
      <script src="../static/js/smooth-scrollbar.js"></script>
      <script src="../static/js/custom.js"></script>
      <script src="../static/js/echarts.min.js"></script>
      <script>
        // 配置图表主题色
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];

        // 初始化所有图表
        const charts = {
            productChart: null,
            temperatureChart: null,
            materialChart: null,
            distanceChart: null,
            verificationChart: null,
            contractChart: null
        };

        // 产品分布图表
        charts.productChart = echarts.init(document.getElementById('productChart'));

        // 温度监控图表
        charts.temperatureChart = echarts.init(document.getElementById('temperatureChart'));

        // 原材料来源图表
        charts.materialChart = echarts.init(document.getElementById('materialChart'));

        // 运输距离图表
        charts.distanceChart = echarts.init(document.getElementById('distanceChart'));

        // 验证记录图表
        charts.verificationChart = echarts.init(document.getElementById('verificationChart'));

        // 合约状态图表
        charts.contractChart = echarts.init(document.getElementById('contractChart'));

        function updateCharts() {
            fetch('/api/visualization_data')
                .then(response => response.json())
                .then(data => {
                    // 产品分布图表
                    charts.productChart.setOption({
                        color: colors,
                        title: {
                            text: '产品类型分布',
                            left: 'center',
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            top: 'middle'
                        },
                        series: [{
                            name: '产品数量',
                            type: 'pie',
                            radius: ['45%', '70%'],
                            center: ['60%', '50%'],
                            avoidLabelOverlap: true,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: '{b}: {c}个'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            data: data.productDistribution
                        }]
                    });

                    // 温度监控图表
                    charts.temperatureChart.setOption({
                        title: {
                            text: '运输温度变化',
                            left: 'center',
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params) {
                                const index = params[0].dataIndex;
                                return `时间：${data.temperatureData.times[index]}<br/>
                                       温度：${params[0].value}°C<br/>
                                       车辆：${data.temperatureData.vehicles[index]}<br/>
                                       路线：${data.temperatureData.routes[index]}`;
                            }
                        },
                        grid: {
                            top: '15%',
                            left: '3%',
                            right: '4%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data.temperatureData.times,
                            axisLabel: {
                                rotate: 45,
                                interval: 'auto'
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '温度 (°C)',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                        visualMap: {
                            show: false,
                            pieces: [{
                                gt: 4,
                                lte: 30,
                                color: '#ff6666'
                            }, {
                                gt: -18,
                                lte: 4,
                                color: '#5470c6'
                            }]
                        },
                        series: [{
                            name: '温度',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 8,
                            data: data.temperatureData.values,
                            markArea: {
                                itemStyle: {
                                    color: 'rgba(255, 173, 177, 0.2)'
                                },
                                data: [
                                    [{
                                        yAxis: 4,
                                        label: {
                                            show: true,
                                            position: 'insideTop',
                                            formatter: '温度过高区域'
                                        }
                                    }, {
                                        yAxis: 30
                                    }],
                                    [{
                                        yAxis: -18,
                                        label: {
                                            show: true,
                                            position: 'insideBottom',
                                            formatter: '正常温度区域'
                                        }
                                    }, {
                                        yAxis: 4
                                    }]
                                ]
                            },
                            lineStyle: {
                                width: 3
                            },
                            areaStyle: {
                                opacity: 0.2
                            },
                            emphasis: {
                                focus: 'series',
                                itemStyle: {
                                    borderWidth: 3
                                }
                            }
                        }]
                    });

                    // 简化原材料来源图表的配置
                    charts.materialChart.setOption({
                        title: {
                            text: '原材料来源分析',
                            left: 'center',
                            top: 10
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function(params) {
                                if (!params.data.value) {
                                    return `供应商：${params.name}`;
                                }
                                return `${params.name}<br/>使用次数：${params.data.value}次`;
                            }
                        },
                        series: [{
                            type: 'sunburst',
                            data: data.materialSources,
                            radius: ['25%', '85%'],
                            center: ['50%', '50%'],
                            sort: null,
                            levels: [
                                {   // 供应商层
                                    r0: '25%',
                                    r: '50%',
                                    itemStyle: {
                                        borderWidth: 2,
                                        borderColor: '#fff'
                                    },
                                    label: {
                                        fontSize: 14,
                                        color: '#333',
                                        rotate: 'tangential'
                                    }
                                },
                                {   // 原材料层
                                    r0: '50%',
                                    r: '85%',
                                    itemStyle: {
                                        borderWidth: 1,
                                        borderColor: '#fff'
                                    },
                                    label: {
                                        fontSize: 12,
                                        color: '#666',
                                        position: 'outside',
                                        padding: 3,
                                        fontSize: 11,
                                        color: '#555'
                                    }
                                }
                            ],
                            itemStyle: {
                                borderWidth: 1,
                                borderColor: '#fff'
                            },
                            label: {
                                show: true
                            }
                        }]
                    });

                    // 运输距离图表
                    charts.distanceChart.setOption({
                        color: colors,
                        title: {
                            text: '运输距离统计',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: function(params) {
                                const route = params[0].name;
                                const distance = params[0].value;
                                const tripCount = data.transportData.tripCounts[params[0].dataIndex];
                                const temps = data.transportData.temperatures[params[0].dataIndex];
                                return `路线: ${route}<br/>
                                       平均距离: ${distance.toFixed(1)}km<br/>
                                       运输次数: ${tripCount}次<br/>
                                       温度范围: ${temps.min}°C ~ ${temps.max}°C`;
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data.transportData.routes,
                            axisLabel: {
                                rotate: 45
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '距离 (km)'
                        },
                        series: [{
                            name: '运输距离',
                            type: 'bar',
                            data: data.transportData.distances,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ]),
                                borderRadius: [5, 5, 0, 0]
                            }
                        }]
                    });

                    // 验证记录图表
                    charts.verificationChart.setOption({
                        title: {
                            text: '产品验证记录统计',
                            left: 'center',
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data.verificationStats.products,
                            axisLabel: {
                                rotate: 45
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '验证次数'
                        },
                        series: [{
                            name: '验证次数',
                            type: 'bar',
                            data: data.verificationStats.counts,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ])
                            },
                            barWidth: '40%',
                            label: {
                                show: true,
                                position: 'top'
                            }
                        }]
                    });

                    // 合约状态图表
                    charts.contractChart.setOption({
                        title: {
                            text: '合约状态分布',
                            left: 'center',
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'horizontal',
                            bottom: 'bottom'
                        },
                        series: [{
                            name: '合约状态',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: true,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                formatter: '{b}: {c}个'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                }
                            },
                            data: data.contractStats.map(item => ({
                                name: item.status || '未设置',
                                value: item.count
                            }))
                        }]
                    });
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }

        // 页面加载完成后更新图表
        window.onload = updateCharts;

        // 监听窗口大小变化，调整图表大小
        window.onresize = function() {
            Object.values(charts).forEach(chart => chart.resize());
        };
    </script>



   </body>
</html>


   </body>
</html>
